<template>
  <div class="courier-detail">
    <div class="courier-profile">
      <div class="profile-header">
        <div class="profile-avatar">
          <el-avatar :size="80" :src="courier.avatar">
            {{ courier.name ? courier.name.substring(0, 1) : '无' }}
          </el-avatar>
        </div>
        <div class="profile-info">
          <div class="profile-name">{{ courier.name }}
            <el-tag :type="getStatusType(courier.status)" class="status-tag">
              {{ getStatusText(courier.status) }}
            </el-tag>
          </div>
          <div class="profile-id">工号：{{ courier.id }}</div>
          <div class="profile-contact">
            <el-icon><Phone /></el-icon> {{ courier.phone }}
          </div>
          <div class="profile-rating">
            <span>评分：</span>
            <el-rate v-model="courier.rating" disabled text-color="#ff9900" />
            <span class="rating-value">{{ courier.rating }}</span>
          </div>
        </div>
        <div class="profile-actions">
          <el-button type="primary" @click="$emit('edit-courier', courier)">编辑</el-button>
          <el-button @click="$emit('close')">关闭</el-button>
        </div>
      </div>
      
      <el-divider />
      
      <!-- 基本信息 -->
      <div class="profile-section">
        <h3>基本信息</h3>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="姓名">{{ courier.name }}</el-descriptions-item>
          <el-descriptions-item label="工号">{{ courier.id }}</el-descriptions-item>
          <el-descriptions-item label="所属区域">{{ courier.area }}</el-descriptions-item>
          <el-descriptions-item label="工作状态">
            <el-tag :type="getStatusType(courier.status)">{{ getStatusText(courier.status) }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="手机号">{{ courier.phone }}</el-descriptions-item>
          <el-descriptions-item label="入职日期">{{ courier.joinDate }}</el-descriptions-item>
          <el-descriptions-item label="身份证号">{{ courier.idCard || '未填写' }}</el-descriptions-item>
          <el-descriptions-item label="住址">{{ courier.address || '未填写' }}</el-descriptions-item>
          <el-descriptions-item label="紧急联系人">{{ courier.emergencyContact || '未填写' }}</el-descriptions-item>
          <el-descriptions-item label="紧急联系人电话">{{ courier.emergencyPhone || '未填写' }}</el-descriptions-item>
        </el-descriptions>
      </div>
      
      <!-- 配送设置信息 -->
      <div class="profile-section">
        <h3>配送能力设置</h3>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="配送区域">
            <el-tag 
              v-for="area in courier.deliveryAreas" 
              :key="area" 
              class="mr-1"
              size="small"
            >{{ area }}</el-tag>
            <span v-if="!courier.deliveryAreas || courier.deliveryAreas.length === 0">未设置</span>
          </el-descriptions-item>
          <el-descriptions-item label="配送能力">{{ courier.deliveryCapacity || 0 }} 单/天</el-descriptions-item>
          <el-descriptions-item label="可配送特殊物品">
            <el-tag :type="courier.canDeliverSpecial ? 'success' : 'info'">
              {{ courier.canDeliverSpecial ? '是' : '否' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="可配送大件物品">
            <el-tag :type="courier.canDeliverLarge ? 'success' : 'info'">
              {{ courier.canDeliverLarge ? '是' : '否' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="备注" :span="2">
            {{ courier.remarks || '无备注' }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    
    <!-- 配送统计 -->
    <div class="delivery-stats">
      <h3>配送统计</h3>
      
      <!-- 统计卡片 -->
      <div class="stat-cards">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-info">
              <h4>总派送量</h4>
              <div class="stat-number">{{ courier.deliveryCount || 0 }}</div>
            </div>
            <div class="stat-icon total">
              <el-icon><Tickets /></el-icon>
            </div>
          </div>
        </el-card>
        
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-info">
              <h4>准时率</h4>
              <div class="stat-number">{{ courier.onTimeRate || 0 }}%</div>
            </div>
            <div class="stat-icon ontime">
              <el-icon><Timer /></el-icon>
            </div>
          </div>
        </el-card>
        
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-info">
              <h4>本月派送</h4>
              <div class="stat-number">{{ monthlyDeliveries }}</div>
            </div>
            <div class="stat-icon month">
              <el-icon><Calendar /></el-icon>
            </div>
          </div>
        </el-card>
        
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-info">
              <h4>客户好评</h4>
              <div class="stat-number">{{ goodRatingCount }}</div>
            </div>
            <div class="stat-icon rating">
              <el-icon><Star /></el-icon>
            </div>
          </div>
        </el-card>
      </div>
      
      <!-- 配送趋势图 -->
      <el-card class="chart-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <h4>近期配送趋势</h4>
            <el-radio-group v-model="chartPeriod" size="small">
              <el-radio-button label="week">本周</el-radio-button>
              <el-radio-button label="month">本月</el-radio-button>
              <el-radio-button label="quarter">本季度</el-radio-button>
            </el-radio-group>
          </div>
        </template>
        <div ref="deliveryChartRef" class="chart-content"></div>
      </el-card>
      
      <!-- 客户评价 -->
      <el-card class="reviews-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <h4>最近客户评价</h4>
          </div>
        </template>
        <div v-if="reviews.length > 0" class="reviews-list">
          <div v-for="(review, index) in reviews" :key="index" class="review-item">
            <div class="review-header">
              <el-avatar :size="32">{{ review.customerName.substring(0, 1) }}</el-avatar>
              <div class="review-info">
                <div class="review-name">{{ review.customerName }}</div>
                <div class="review-date">{{ review.date }}</div>
              </div>
              <div class="review-rating">
                <el-rate v-model="review.rating" disabled text-color="#ff9900" />
              </div>
            </div>
            <div class="review-content">
              {{ review.content }}
            </div>
            <el-divider v-if="index < reviews.length - 1" />
          </div>
        </div>
        <div v-else class="empty-reviews">
          <el-empty description="暂无评价" />
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, watch } from 'vue'
import { Phone, Tickets, Timer, Calendar, Star } from '@element-plus/icons-vue'
import * as echarts from 'echarts'

const props = defineProps({
  courier: {
    type: Object,
    required: true
  }
})

// 图表配置
const chartPeriod = ref('week')
const deliveryChartRef = ref(null)
let deliveryChart = null

// 模拟数据
const monthlyDeliveries = ref(156)
const goodRatingCount = ref(98)

// 模拟评价数据
const reviews = reactive([
  {
    customerName: '李明',
    date: '2023-05-10',
    rating: 5,
    content: '配送员非常准时，服务态度也很好，包装完好无损，非常满意！'
  },
  {
    customerName: '王芳',
    date: '2023-05-08',
    rating: 4,
    content: '送货速度快，态度不错，但是没有提前电话联系。'
  },
  {
    customerName: '张伟',
    date: '2023-05-05',
    rating: 5,
    content: '这名配送员每次都很专业，很有礼貌，包裹放置也很妥当。'
  }
])

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    active: '在职',
    onLeave: '休假',
    inactive: '离职'
  }
  return statusMap[status] || status
}

// 获取状态标签类型
const getStatusType = (status) => {
  const typeMap = {
    active: 'success',
    onLeave: 'warning',
    inactive: 'info'
  }
  return typeMap[status] || ''
}

// 初始化配送趋势图表
const initDeliveryChart = () => {
  if (!deliveryChartRef.value) return
  
  if (!deliveryChart) {
    deliveryChart = echarts.init(deliveryChartRef.value)
  }
  
  let xData = []
  let deliveries = []
  let onTime = []
  
  // 根据选择的时间范围生成数据
  if (chartPeriod.value === 'week') {
    xData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    deliveries = [12, 15, 18, 14, 16, 10, 8]
    onTime = [11, 14, 17, 13, 16, 9, 8]
  } else if (chartPeriod.value === 'month') {
    xData = Array.from({length: 30}, (_, i) => `${i+1}日`)
    deliveries = Array.from({length: 30}, () => Math.floor(Math.random() * 10) + 5)
    onTime = deliveries.map(d => Math.floor(d * (0.9 + Math.random() * 0.1)))
  } else {
    xData = ['1月', '2月', '3月']
    deliveries = [320, 350, 290]
    onTime = [300, 330, 280]
  }
  
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['总派送量', '准时派送']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: xData
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '总派送量',
        type: 'bar',
        data: deliveries,
        itemStyle: {
          color: '#409EFF'
        }
      },
      {
        name: '准时派送',
        type: 'bar',
        data: onTime,
        itemStyle: {
          color: '#67C23A'
        }
      }
    ]
  }
  
  deliveryChart.setOption(option)
}

// 监听图表周期变化
watch(chartPeriod, () => {
  initDeliveryChart()
})

// 监听窗口大小变化，重绘图表
window.addEventListener('resize', () => {
  deliveryChart?.resize()
})

// 定义组件事件
const emit = defineEmits(['edit-courier', 'close'])

// 组件挂载时初始化
onMounted(() => {
  initDeliveryChart()
})
</script>

<style scoped>
.courier-detail {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.courier-profile, .delivery-stats {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
}

.profile-header {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 24px;
}

.profile-info {
  flex: 1;
}

.profile-name {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

.status-tag {
  margin-left: 10px;
}

.profile-id, .profile-contact {
  color: #606266;
  margin-bottom: 6px;
}

.profile-rating {
  display: flex;
  align-items: center;
  gap: 5px;
}

.rating-value {
  color: #ff9900;
  font-weight: 600;
}

.profile-actions {
  display: flex;
  gap: 10px;
}

.profile-section {
  margin-bottom: 24px;
}

.profile-section h3, .delivery-stats h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 16px 0;
  color: #303133;
}

.mr-1 {
  margin-right: 5px;
}

/* 统计卡片 */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  height: 100px;
}

.stat-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.stat-info h4 {
  font-size: 14px;
  color: #909399;
  margin: 0 0 8px 0;
  font-weight: 400;
}

.stat-number {
  font-size: 24px;
  font-weight: 700;
  color: #303133;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
}

.stat-icon.total {
  background: linear-gradient(135deg, #409EFF, #007AFF);
}

.stat-icon.ontime {
  background: linear-gradient(135deg, #67C23A, #42B983);
}

.stat-icon.month {
  background: linear-gradient(135deg, #E6A23C, #F56C6C);
}

.stat-icon.rating {
  background: linear-gradient(135deg, #9966FF, #6A5ACD);
}

/* 图表卡片 */
.chart-card {
  margin-bottom: 24px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h4 {
  font-size: 16px;
  margin: 0;
  font-weight: 600;
  color: #303133;
}

.chart-content {
  height: 300px;
}

/* 评价卡片 */
.reviews-card {
  margin-bottom: 24px;
}

.reviews-list {
  max-height: 300px;
  overflow-y: auto;
}

.review-item {
  margin-bottom: 16px;
}

.review-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.review-info {
  flex: 1;
  margin-left: 12px;
}

.review-name {
  font-weight: 500;
}

.review-date {
  font-size: 12px;
  color: #909399;
}

.review-content {
  margin-left: 44px;
  color: #606266;
  line-height: 1.5;
}

.empty-reviews {
  padding: 40px 0;
}

@media (max-width: 768px) {
  .profile-header {
    flex-direction: column;
    align-items: center;
  }
  
  .profile-actions {
    width: 100%;
    justify-content: center;
    margin-top: 16px;
  }
  
  .profile-info {
    text-align: center;
  }
  
  .profile-name {
    justify-content: center;
  }
  
  .profile-rating {
    justify-content: center;
  }
}
</style> 